<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>角色列表</title>
    <link rel="stylesheet" href="../assets/css/layui.css">
    <link rel="stylesheet" href="../assets/css/view.css"/>
    <link rel="stylesheet" href="../assets/css/admin.css"/>
    <link rel="stylesheet" href="/static/other/layui/css/layui.css" tppabs="https://www.layui.site/layui/dist/css/layui.css" media="all">
</head>
<body class="layui-view-body">
<div class="layui-content">
    <!--面包屑导航-->
    <div class="mianb">
        <div class="mblf layui-col-xs6 layui-col-md6">
            <i class="layui-icon">&#xe656;</i>
            <p>首页管理 > <span>用户列表</span></p>
        </div>
        <div class="mbrt layui-col-xs6 layui-col-md6">
            <a href="javascript:;" class="layui-btn layui-btn-normal" id="addbanner">增加</a>
        </div>
    </div>
    <!--面包屑导航-->
    <div class="layui-row">
        <div class="layui-card">
            <div class="table-responsive">
                <div  style="display: inline;float: left;">

                    <button type="button" name="selectAll"  id="selectAll"    class="layui-btn  layui-btn-normal layui-btn-xs float-left">全选</button>
                    <button type="button" name="cancelSelect"   id="cancelSelect"  style="margin-left: 20px" class="layui-btn  layui-btn-normal layui-btn-xs float-left">取消全选</button>
                    <a id="deleteAll" class="layui-btn layui-btn-danger layui-btn-xs ">批量删除</a>
                </div>

                <table class="layui-table" lay-skin="line" lay-size="lg" id="userTable">
                    <thead>
                    <tr>
                        <th >选择</th>
                        <th >排序</th>
                        <th>菜单名称</th>
                        <th>菜单路径</th>
                        <th>父菜单</th>
                        <th>级别</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="menu,listDStat : ${menuList}" >
                        <td  class="layui-field-box" ><input type="checkbox" th:value="${menu.id}" id="selectItem" name="selectItem"></td>
                        <td  class="layui-form" >[[${listDStat.index+1}]]</td>
                        <td  class="layui-form" >[[${menu.name}]]</td>
                        <td  class="layui-form" >[[${menu.url}]]</td>
                        <td  class="layui-form" >[[${menu.parent==null?'无':menu.parent.name}]]</td>
                        <td  class="layui-form" >[[${menu.level}]]</td>
                        <td>
                            <div class="layui-table-cell laytable-cell-1-0-10">
                                <a class="layui-btn layui-btn-normal layui-btn-xs edit" id="edit">修改</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs delete" >删除</a>
                            </div>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>

            <!--分页-->
            <div id="page"></div>
            <!--分页-->
        </div>
    </div>
</div>
<script src="../assets/jquery.min.js"></script>
<script src="../assets/layui.all.js"></script>
<script src="/static/other/layui/layui.js" charset="utf-8"></script>
<script>

    var element = layui.element;
    layui.use(['laypage', 'layer'], function(){
        // var menuList =[[${menuList}]]
        // alert(menuList)
        var laypage = layui.laypage
            ,layer = layui.layer;
        //页码完整功能
        laypage.render({
            elem: 'page'
            ,count: 100
            ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
            ,jump: function(obj){
                console.log(obj)
            }
        });
    });

    //添加弹框
    $('#addbanner').on('click', function(){
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.open({
                type: 2,
                title: '添加菜单',
                fix: false,
                shadeClose: true,
                shade: 0.8,
                area: ['900px', '600px'],
                content: 'openMenu',
                end: function () {
                    location.reload();
                }
            });
        });
    })

    //修改弹框
    $('.edit').on('click', function(){
        var tr = $(this).closest('tr');//找到tr元素
        var id = tr.find('td:eq(0)').find("INPUT[type ='checkbox' ]").val();//找到td元素
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.open({
                type: 2,
                title: '修改用户',
                fix: false,
                shadeClose: true,
                shade: 0.8,
                area: ['660px', '420px'],
                content: '/role/openEdit?id='+id,
                end: function () {
                    location.reload();
                }
            });
        });
    })

    //全选
    $("#selectAll").click(function(){
        $('[name=selectItem]:checkbox').each(function(){
            this.checked=true;
        });
    });
    //取消全选
    $("#cancelSelect").click(function(){
        $('[name=selectItem]:checkbox').each(function(){
            this.checked=false;
        });
    });
    //判断弹框
    $(".delete").click(function(row){
        var tr = $(this).closest('tr');//找到tr元素
        var id = tr.find('td:eq(0)').find("INPUT[type ='checkbox' ]").val();//找到td元素
        var td = this.closest("td");
        layer.confirm('确定要删除此信息？', {
            btn: ['是','否'] //按钮
        }, function(){
            $.ajax({
                url: '/role/delete',
                data:{id:id},
                method:'post',
                success: function (data) {
                    layer.msg('已删除', {icon: 1});
                    window.location.reload()
                },
                error:function (data){
                    layer.error('失败！！',{shade:1})
                }
            });

        }, function(){
            layer.msg('已取消',  {icon: 2});
        });
    })
    $("#deleteAll").click(function(){
        var chk_value =[];//定义一个数组
        $('input[name="selectItem"]:checked').each(function(){//遍历每一个名字为interest的复选框，其中选中的执行函数
            chk_value.push($(this).val());//将选中的值添加到数组chk_value中
        });
        if(0==chk_value.length){
            layer.msg('至少选择一条', {icon: 2});
        }else{
            layer.confirm('确定要删除选中信息？', {
                btn: ['是','否'] //按钮
            }, function(){

                $.ajax({
                    url: '/role/deleteBatchRole',
                    data:{ids:JSON.stringify(chk_value)},
                    success: function (data) {
                        var res =[[${res}]]
                        layer.msg(res.msg, {icon: 1});
                        window.location.reload();
                    },
                    error:function (data){
                        var res =[[${res}]]
                        layer.error(res.msg,{icon:2})
                        window.location.reload();
                    }
                });
            }, function(){
                layer.msg('已取消',  {icon: 2});
            });
        }

    })
    layui.use('form', function(){
        var form = layui.form;
        form.render();
    });
</script>
<script>
    //调用示例
    layer.photos({
        photos: '.layer-photos-demo'
        ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
    });
</script>


<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use(['tree', 'util'], function(){
        var tree = layui.tree
            ,layer = layui.layer
            ,util = layui.util

            //模拟数据
            ,data = [{
                title: '一级1'
                ,id: 1
                ,field: 'name1'
                ,checked: true
                ,spread: true
                ,children: [{
                    title: '二级1-1 可允许跳转'
                    ,id: 3
                    ,field: 'name11'
                    ,href: 'https://www.layui.com/'
                    ,children: [{
                        title: '三级1-1-3'
                        ,id: 23
                        ,field: ''
                        ,children: [{
                            title: '四级1-1-3-1'
                            ,id: 24
                            ,field: ''
                            ,children: [{
                                title: '五级1-1-3-1-1'
                                ,id: 30
                                ,field: ''
                            },{
                                title: '五级1-1-3-1-2'
                                ,id: 31
                                ,field: ''
                            }]
                        }]
                    },{
                        title: '三级1-1-1'
                        ,id: 7
                        ,field: ''
                        ,children: [{
                            title: '四级1-1-1-1 可允许跳转'
                            ,id: 15
                            ,field: ''
                            ,href: 'https://www.layui.com/doc/'
                        }]
                    },{
                        title: '三级1-1-2'
                        ,id: 8
                        ,field: ''
                        ,children: [{
                            title: '四级1-1-2-1'
                            ,id: 32
                            ,field: ''
                        }]
                    }]
                },{
                    title: '二级1-2'
                    ,id: 4
                    ,spread: true
                    ,children: [{
                        title: '三级1-2-1'
                        ,id: 9
                        ,field: ''
                        ,disabled: true
                    },{
                        title: '三级1-2-2'
                        ,id: 10
                        ,field: ''
                    }]
                },{
                    title: '二级1-3'
                    ,id: 20
                    ,field: ''
                    ,children: [{
                        title: '三级1-3-1'
                        ,id: 21
                        ,field: ''
                    },{
                        title: '三级1-3-2'
                        ,id: 22
                        ,field: ''
                    }]
                }]
            },{
                title: '一级2'
                ,id: 2
                ,field: ''
                ,spread: true
                ,children: [{
                    title: '二级2-1'
                    ,id: 5
                    ,field: ''
                    ,spread: true
                    ,children: [{
                        title: '三级2-1-1'
                        ,id: 11
                        ,field: ''
                    },{
                        title: '三级2-1-2'
                        ,id: 12
                        ,field: ''
                    }]
                },{
                    title: '二级2-2'
                    ,id: 6
                    ,field: ''
                    ,children: [{
                        title: '三级2-2-1'
                        ,id: 13
                        ,field: ''
                    },{
                        title: '三级2-2-2'
                        ,id: 14
                        ,field: ''
                        ,disabled: true
                    }]
                }]
            },{
                title: '一级3'
                ,id: 16
                ,field: ''
                ,children: [{
                    title: '二级3-1'
                    ,id: 17
                    ,field: ''
                    ,fixed: true
                    ,children: [{
                        title: '三级3-1-1'
                        ,id: 18
                        ,field: ''
                    },{
                        title: '三级3-1-2'
                        ,id: 19
                        ,field: ''
                    }]
                },{
                    title: '二级3-2'
                    ,id: 27
                    ,field: ''
                    ,children: [{
                        title: '三级3-2-1'
                        ,id: 28
                        ,field: ''
                    },{
                        title: '三级3-2-2'
                        ,id: 29
                        ,field: ''
                    }]
                }]
            }]
            , data2 = [{
                title: '早餐',
                id: 1,
                children: [{
                    title: '油条',
                    id: 5
                }, {
                    title: '包子',
                    id: 6
                }, {
                    title: '豆浆',
                    id: 7
                }]
            }, {
                title: '午餐',
                id: 2,
                checked: true,
                children: [{
                    title: '藜蒿炒腊肉',
                    id: 8
                }, {
                    title: '西湖醋鱼',
                    id: 9
                }, {
                    title: '小白菜',
                    id: 10
                }, {
                    title: '海带排骨汤',
                    id: 11
                }]
            }, {
                title: '晚餐',
                id: 3,
                children: [{
                    title: '红烧肉',
                    id: 12,
                    fixed: true
                }, {
                    title: '番茄炒蛋',
                    id: 13
                }]
            }, {
                title: '夜宵',
                id: 4,
                children: [{
                    title: '小龙虾',
                    id: 14,
                    checked: true
                }, {
                    title: '香辣蟹',
                    id: 15,
                    disabled: true
                }, {
                    title: '烤鱿鱼',
                    id: 16
                }]
            }];


        //基本演示
        tree.render({
            elem: '#test12'
            ,data: data
            ,showCheckbox: true  //是否显示复选框
            ,id: 'demoId1'
            ,isJump: true //是否允许点击节点时弹出新窗口跳转
            ,click: function(obj){
                var data = obj.data;  //获取当前点击的节点数据
                layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
            }
        });

        //按钮事件
        util.event('lay-demo', {
            getChecked: function(othis){
                var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据

                layer.alert(JSON.stringify(checkedData), {shade:0});
                console.log(checkedData);
            }
            ,setChecked: function(){
                tree.setChecked('demoId1', [12, 16]); //勾选指定节点
            }
            ,reload: function(){
                //重载实例
                tree.reload('demoId1', {

                });

            }
        });
        tree.render({
            elem: '#test7'
            ,data: data2
            ,showCheckbox: true
        });

    });
</script>


</body>
</html>
